<template>
  <custom-nav showBackArrow title="新闻详情"></custom-nav>
  <view class="page-index" :style="pagePaddingTop">
    <view class="detail-info" v-if="data?.id_public_middle_table">
      <view class="head-text">{{ data.mid_table_remark_001 }}</view>
      <view class="des-info">
        <view class="des-item" v-if="data.mid_table_remark_004">
                  <image src="/static/news/time@2x.png"></image>
          <view>{{ formatTime(data.mid_table_remark_004) }}</view>
        </view>
        <view class="des-item">
          <image src="/static/news/see@2x.png"></image>
          <view>{{ data.mid_table_remark_006 || 0 }}</view>
        </view>
        <view class="des-item" v-if="data.mid_table_remark_005">
                  <image src="/static/news/people@2x.png"></image>
          <view>{{ data.mid_table_remark_005 || '' }}</view>
        </view>
      </view>
      <view class="line"></view>
      <view class="des-html">
        <view v-html="getHtmlData(data.mid_table_remark_008)"></view>
      </view>
    </view>
  </view>
</template>



<script setup>

import {
  ref,
} from "vue"
import {
  getNavHeightTop
} from "@/stores/navStore.js"
import CustomNav from "@/components/custom-nav/index.vue"
import {
  middleAPI
} from "@/http/apis/newsAPI.js"
import {
  onLoad,
} from "@dcloudio/uni-app"
import { Base64 } from "@/libs/js-base64/base64"


const navHeightInfo = getNavHeightTop();
const pagePaddingTop = ref({
  "paddingTop": navHeightInfo.navTotalHeight + 'px'
})
const data = ref();
onLoad((e) => {
  if (!e.id) {
    uni.showToast({
      title: '参数错误',
      icon: 'none'
    })
    return
  }
  // 更新浏览数据
  // middleAPI({
  //   invoke_method: "public_insert_or_update_middle_table",
  //   pre_db_para_middle_table_name: "public_middle_table_lite_mod_news_msg",
  //   type_middle_app: "10001",
  //   type_inner_app: "1001",
  //   pre_db_para_id_public_middle_table: e.id,
  //   mid_table_remark_006: 1,
  // }).catch(() => false);

  // 获取详情
  middleAPI({
    invoke_method: "public_load_middle_table_list",
    pre_db_para_middle_table_name: "public_middle_table_lite_mod_news_msg",
    type_middle_app: "10001",
    type_inner_app: "1001",
    is_online: "0",
    pre_db_para_begin_idx: 0,
    pre_db_para_length_4_list: 10,
    id_public_middle_table: e.id,
  }).then((response) => {
    if (response.page_content.length > 0) {
      data.value = response.page_content[0];
    }
  }).catch(() => false);
})


const formatTime = (e) => {
  const date = new Date(e)
  return `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()}`
}
const getHtmlData = (e) => {
  return Base64.decode(e)
}
</script>



<style lang="less" scoped>
.page-index {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #182836;

  .detail-info {
    margin-top: 40rpx;
    margin-left: 40rpx;
    margin-right: 40rpx;
    padding-bottom: 40rpx;

    .head-text {
      width: 100%;
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #FFFFFF;
      line-height: 56rpx
    }

    .des-info {
      margin-top: 32rpx;
      width: 100%;
      display: flex;
      align-items: center;
      height: 28rpx;
      overflow: hidden;
      font-family: PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      font-size: 22rpx;
      opacity: 0.7;

      .des-item {
        display: flex;
        align-items: center;
        margin-right: 40rpx;
        image {
          width: 28rpx;
          height: 28rpx;
        }

        view {
          margin-left: 10rpx;
          max-width: 300rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }

    .line {
      margin-top: 24rpx;
      width: 100%;
      height: 1rpx;
      background: #EEEEEE;
      opacity: 0.1;
    }

    .des-html {
      margin-top: 56rpx;
      width: 100%;
      overflow-x: hidden;

      view {
        color: white !important;
      }
    }
  }
}</style>